<template>
  <!-- 弹窗中的 清洗时间 -->
  <div class="cleaning-time">
    <div class="selectBar">
      
      <div class="pickTime">
        <date-range-picker @passDate="passDate" :startTime="new Date(new Date()-6*24*3600000).toLocaleDateString()" :endTime="new Date().toLocaleDateString()" />
      </div>
    </div>
    <div class="table_data">
      <el-scrollbar style="height:100%">
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column prop="startTime" label="清洗开始时间">
            <template slot-scope="{row}">
              <span>{{row.startTime}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="stopTime" label="清洗结束时间"></el-table-column>
          <el-table-column prop="action" label="执行动作"></el-table-column>
        </el-table>
      </el-scrollbar>
    </div>
    <pagina-tion
      v-show="total>=0"
      :background="true"
      :total="total"
      :offset.sync="offset"
      :limit.sync="limit"
      @pagination="getChangePage"
    />

  </div>
</template>

<script>
import { mapState } from 'vuex'
import {
  format
} from 'silly-datetime'
import * as api from '@/api'
import { project_id, limit } from '@/consts/consts'
import { dealStatusMap, except_levels } from '@/consts/codeMaps'
import { getLocaltodyString } from '@/utils/timeUtil.js'
import { parseJson} from '@/utils/tool'
const dateStart = getLocaltodyString()
export default {
  data() {
    return {
      format,
      branchList: [],
      deviceList: [],
      DateTime:[dateStart, new Date().getTime()],
      total: 0,
      offset: 0,
      limit: 5,
      tableData: [],
      queryObj: {
        time_start: new Date().getTime() - 6 * 24 * 60 * 60 * 1000,
        time_end: new Date().getTime()
      }
    }
  },
  computed: {
    ...mapState(['deviceDetail', 'dashtype'])
  },
  methods: {

    getStatus(status) {
      return dealStatusMap.find(item => item.key === status)
    },

    getChangePage(val) {
      this.offset = val.offset
      this.queryDeviceRt()
    },

    passDate (v) {
      this.queryObj.time_start = new Date(v[0]).getTime()
      this.queryObj.time_end = new Date(v[1]).getTime()
      this.queryDeviceRt()
    },


    // 6.13. 查询设备日报表
    async queryDeviceRt() { 
      const { code, data, total } = await api.maxcompute.queryDeviceRt({
        offset: this.offset,
        limit: this.limit
      }, {
        dashtype: this.dashtype,
        serial: this.deviceDetail.serial,
        day_start: format(this.queryObj.time_start, 'YYYY-MM-DD'),
        day_end: format(this.queryObj.time_end, 'YYYY-MM-DD'),
        store_id: this.$route.query.branch_number
      })
      if (code === 0) {
        this.total = total
        this.tableData = data.map(item => {
          const d = parseJson(item.data)
          return {
            startTime:d.startTime,
            stopTime:d.stopTime,
            time: d.time,
            action: '清洗'
          }
        })
      }
    },

  },
  created() {
    this.queryDeviceRt()
  },
  mounted () {
    
  },
}
</script>

<style lang="stylus">
.cleaning-time {
  .selectBar {
    height: 40px;
    flexMiddle(space-between);
    .pickTime {
      width: 260px;  
    }
  }
  .table_data {
    margin-top: getPx(15);
    height:getPx(300);
  }
  // @media screen and (max-height:$h){
  //   .table_data {
  //     height:getPx(300);
  //     overflow-y:auto;
  //   }
  // }
}

</style>